<template>
  <q-drawer
    v-model="showSettings"
    side="right"
    bordered
    :width="300"
    behavior="mobile"
    :breakpoint="500"
    overlay
    elevated
  >
    <q-scroll-area class="fit">
      <div class="q-pa-md">
        <!-- 主题风格设置 -->
        <div class="text-h6 q-mb-md">主题风格设置</div>

        <div class="row q-gutter-sm q-mb-lg">
          <div class="cursor-pointer relative-position" @click="handleTheme('theme-dark')">
            <q-img
              src="~assets/dark.svg"
              width="80px"
              height="80px"
              fit="cover"
              class="rounded-borders"
            />
            <q-icon
              v-if="sideTheme === 'theme-dark'"
              name="check"
              color="primary"
              size="24px"
              class="absolute-top-right q-ma-xs"
            />
          </div>

          <div class="cursor-pointer relative-position" @click="handleTheme('theme-light')">
            <q-img
              src="~assets/light.svg"
              width="80px"
              height="80px"
              fit="cover"
              class="rounded-borders"
            />
            <q-icon
              v-if="sideTheme === 'theme-light'"
              name="check"
              color="primary"
              size="24px"
              class="absolute-top-right q-ma-xs"
            />
          </div>
        </div>

        <div class="row items-center q-mb-md">
          <span class="col">主题颜色</span>
          <div class="col-auto">
            <q-input
              v-model="theme"
              dense
              outlined
              class="q-mr-sm"
              style="width: 120px"
              @update:model-value="themeChange"
            >
              <template v-slot:append>
                <q-icon name="colorize" class="cursor-pointer">
                  <q-popup-proxy
                    transition-show="scale"
                    transition-hide="scale"
                    anchor="bottom right"
                    self="top right"
                    class="color-picker-popup"
                  >
                    <q-color v-model="theme" @update:model-value="themeChange" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
          </div>
        </div>

        <q-separator class="q-my-md" />

        <!-- 系统布局配置 -->
        <div class="text-h6 q-mb-md">系统布局配置</div>

        <div class="row items-center q-mb-sm">
          <span class="col">开启 TopNav</span>
          <q-toggle v-model="topNav" class="col-auto" color="primary" />
        </div>

        <div class="row items-center q-mb-sm">
          <span class="col">开启 Tags-Views</span>
          <q-toggle v-model="tagsView" class="col-auto" color="primary" />
        </div>

        <div class="row items-center q-mb-sm">
          <span class="col">固定 Header</span>
          <q-toggle v-model="fixedHeader" class="col-auto" color="primary" />
        </div>

        <div class="row items-center q-mb-sm">
          <span class="col">显示 Logo</span>
          <q-toggle v-model="sidebarLogo" class="col-auto" color="primary" />
        </div>

        <div class="row items-center q-mb-md">
          <span class="col">动态标题</span>
          <q-toggle v-model="dynamicTitle" class="col-auto" color="primary" />
        </div>

        <q-separator class="q-my-md" />

        <div class="row q-gutter-sm">
          <q-btn color="primary" outline icon="save" label="保存配置" @click="saveSetting" />
          <q-btn outline icon="refresh" label="重置配置" @click="resetSetting" />
        </div>
      </div>
    </q-scroll-area>
  </q-drawer>
</template>

<script setup>
import { useQuasar } from 'quasar'
import { useDynamicTitle } from '@/utils/dynamicTitle'
import useAppStore from '@/stores/modules/app'
import useSettingsStore from '@/stores/modules/settings'
import usePermissionStore from '@/stores/modules/permission'
import { handleThemeStyle } from '@/utils/theme'

const $q = useQuasar()
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()

const showSettings = ref(false)
const theme = ref(settingsStore.theme)
const sideTheme = ref(settingsStore.sideTheme)
const storeSettings = computed(() => settingsStore)

/** 是否需要topnav */
const topNav = computed({
  get: () => storeSettings.value.topNav,
  set: (val) => {
    settingsStore.changeSetting({ key: 'topNav', value: val })
    if (!val) {
      appStore.toggleSideBarHide(false)
      permissionStore.setSidebarRouters(permissionStore.defaultRoutes)
    }
  },
})

/** 是否需要tagview */
const tagsView = computed({
  get: () => storeSettings.value.tagsView,
  set: (val) => {
    settingsStore.changeSetting({ key: 'tagsView', value: val })
  },
})

/**是否需要固定头部 */
const fixedHeader = computed({
  get: () => storeSettings.value.fixedHeader,
  set: (val) => {
    settingsStore.changeSetting({ key: 'fixedHeader', value: val })
  },
})

/**是否需要侧边栏的logo */
const sidebarLogo = computed({
  get: () => storeSettings.value.sidebarLogo,
  set: (val) => {
    settingsStore.changeSetting({ key: 'sidebarLogo', value: val })
  },
})

/**是否需要侧边栏的动态网页的title */
const dynamicTitle = computed({
  get: () => storeSettings.value.dynamicTitle,
  set: (val) => {
    settingsStore.changeSetting({ key: 'dynamicTitle', value: val })
    // 动态设置网页标题
    useDynamicTitle()
  },
})

function themeChange(val) {
  settingsStore.changeSetting({ key: 'theme', value: val })
  theme.value = val
  handleThemeStyle(val)
}

function handleTheme(val) {
  settingsStore.changeSetting({ key: 'sideTheme', value: val })
  sideTheme.value = val
}

function saveSetting() {
  $q.loading.show({
    message: '正在保存到本地，请稍候...',
  })

  let layoutSetting = {
    topNav: storeSettings.value.topNav,
    tagsView: storeSettings.value.tagsView,
    fixedHeader: storeSettings.value.fixedHeader,
    sidebarLogo: storeSettings.value.sidebarLogo,
    dynamicTitle: storeSettings.value.dynamicTitle,
    sideTheme: storeSettings.value.sideTheme,
    theme: storeSettings.value.theme,
  }

  localStorage.setItem('layout-setting', JSON.stringify(layoutSetting))
  setTimeout(() => $q.loading.hide(), 1000)
}

function resetSetting() {
  $q.loading.show({
    message: '正在清除设置缓存并刷新，请稍候...',
  })

  localStorage.removeItem('layout-setting')
  setTimeout(() => window.location.reload(), 1000)
}

function openSetting() {
  showSettings.value = true
  console.log(showSettings.value)
}

defineExpose({
  openSetting,
})
</script>

<style lang="scss" scoped>
.color-picker-popup {
  .q-color-picker {
    min-width: 300px;
  }
}
</style>
